<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-container>
                    <el-aside class="top-aside">
                        <img src="../assets/元艺Art2.png" alt="元艺Art">
                        <div class="title">加入创作者生态</div>
                        <h4>若您和您的团队想发行推广数字藏品,请联系</h4>
                        <div>
                            <a href="javascript:;">ip@yuanyi.com</a>
                            <a href="javascript:;">ip2@yuanyi.com</a>
                        </div>
                    </el-aside>


                    <el-main class="top-main">
                        <ul class="top-ul">
                            <li>联系我们</li>
                            <li>商务合作</li>
                            <li>关于我们</li>
                            <li>用户协议</li>
                        </ul>
                        <div class="top-div">
                            
                        </div>
                    </el-main>
                </el-container>
            </el-header>
            <el-main>
                <a href="javascript:;">琼ICP备2021003935</a>
                <div class="please">
                    <img src="../assets/please.png" alt="警徽">
                    <span>琼公网安备46902302000560号</span>
                </div>
                <div class="info">
                    <el-icon>
                        <Service />
                    </el-icon>
                    2021 顶部黑洞科技有限公司 地址: 湖南省长沙市岳麓区欧富安科技园  联系电话: 400-8888-8888
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import show from './show.vue'
export default {
    name: 'BottomBar',

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {

    },

    components:{
        show
    }
};
</script>

<style lang="css" scoped>
.common-layout {
    margin: 100px 20px;
    background: url(../assets/bg1.svg) no-repeat;
}

.top-aside {
    width: 40%;
    position: relative;
    height: 220px;
    overflow: hidden;
}

.top-aside::before {
    content: "";
    border-bottom: 1px solid #d1ccd8;
    position: absolute;
    z-index: 9999;
    bottom: 0px;
    left: 0;
    width: 100%;

}

.top-aside img {
    width: 50%;
}

.top-aside div.title {
    font-size: 30px;
    font-weight: bolder;
    margin-top: 20px;
}

.top-aside h4 {
    color: #666;
}

.top-aside div a {
    text-decoration: none;
    color: #0066EE;
}

.top-aside div a:last-child {
    margin-left: 20px;
}

.top-main {
    padding: 0 !important;
    overflow: hidden;
    position: relative;
}

.top-main ul li {
    list-style: none;
    cursor: pointer;
    width: 70px;
}

.top-main ul li:hover {
    color: #852CEA;
}

.top-main ul li:not(:first-child) {
    margin-top: 10px;
}

.el-header {
    height: 200px;
}
.el-main{
    margin-top: 10px;
}
.el-main a{
    font-size: 15px;
    text-decoration: none;
    color: #3385F1;
    font-family:'微软雅黑', Tahoma, Geneva, Verdana, sans-serif;
}
.el-main .please{
    margin-top: 20px;
}
.el-main .please img{
    vertical-align: middle;
    margin-right: 10px;
    width: 23px;
}
.el-main .please span{
    color: silver;
    font-family:'微软雅黑', Tahoma, Geneva, Verdana, sans-serif;
    vertical-align: middle;
    font-size: 13px;
}
.info{
    margin-top: 10px;
    color: rgb(122, 110, 110);
    vertical-align: middle;
    font-size: 13px;
    font-family:'微软雅黑', Tahoma, Geneva, Verdana, sans-serif;
}
.top-ul{
    display: inline-block;
}
.top-main .top-div{
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 200px;
    width: 422px;
    height: 174px;
    background: url(../assets/show2.gif) no-repeat;
    background-size: 100%;
    background-position: center;
}
</style>